<template>
    <div class="hospital">
        <!--        导航区-->
        <div class="menu">
            <div class="top">
                <el-icon>
                    <House/>
                </el-icon>
                <span>
                / 医院信息
            </span>
            </div>
            <el-menu router  :default-active="$route.path"
                     class="el-menu-vertical-demo"
                     @select="handleMenuClick"
                  >
                <el-menu-item index="/hospital/register">
                    <el-icon>
                        <Calendar/>
                    </el-icon>
                    <span>预约挂号</span>
                </el-menu-item>
                <el-menu-item index="/hospital/detail">
                    <el-icon>
                        <Document/>
                    </el-icon>
                    <span>医院详情</span>
                </el-menu-item>
                <el-menu-item index="/hospital/notice">
                    <el-icon>
                        <Timer/>
                    </el-icon>
                    <span>预约通知</span>
                </el-menu-item>
                <el-menu-item index="/hospital/close">
                    <el-icon>
                        <InfoFilled/>
                    </el-icon>
                    <span>停诊信息</span>
                </el-menu-item>
                <el-menu-item index="/hospital/search">
                    <el-icon>
                        <Search/>
                    </el-icon>
                    <span>查询/取消</span>
                </el-menu-item>
            </el-menu>
        </div>

        <!--        内容展示区：路由组件展示区-->
        <div class="content">
<!--            自组件展示结构的地方-->
            <router-view/>
        </div>
    </div>
</template>
<script setup lang="ts">
import {
    Document, Calendar, Timer, Search, InfoFilled, House,
} from "@element-plus/icons-vue";
import {onMounted} from "vue";
import useDetailStore from "@/store/modules/hospitalDetail.ts";
import {useRoute,useRouter} from "vue-router";

//获取仓库对象
let detailStore = useDetailStore()
let $route= useRoute()
let $router =useRouter()

const handleMenuClick = (path:string)=>{
    $router.push({ path , query:{hoscode:$route.query.hoscode } });
}

// 组件挂载完毕,通知pinia仓库发送请求获取医院详情的数据,存储在仓库中
onMounted(()=>{
    //通知pinia仓库发送请求获取医院详情的数据
    detailStore.getHospital(<string>$route.query.hoscode)

    //获取医院科室的信息
    detailStore.getDepartment(<string>$route.query.hoscode)
}
)

</script>


<script lang="ts">
export default {
    name: "hospital"
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;

  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      color: #7f7f7f;
    }
  }

  .content {
    flex: 8;
  }
}

</style>